<!-- <template>
	<view class="pagebody" :style="{ minheight: maxHeight }">
		<view class="topbgbox">
			<view class="justify-between align-center">
				<image @click="backpage" src="@/static/images/login/leftjt.png" alt=""
					style="width: 48rpx;height: 48rpx;"></image>
				<view class="color303b39 fz40 fwbold">
					修改密码
				</view>
				<view class="">
				</view>
			</view>
			<view class="fz32 color303b39 flex-row align-center fwbold" style="margin-top: 82rpx;color: #7E8987;">
				当前密码
			</view>
			<view class="inputbox" style="margin-top: 8rpx;">
				<uni-easyinput type="password" v-model="form.oldpassword" :placeholderStyle="placeholderStyle"
					placeholder="请输入当前密码"></uni-easyinput>
			</view>
			<view class="fz32 color303b39 flex-row align-center fwbold" style="margin-top: 82rpx;color: #7E8987;">
				新密码
			</view>
			<view class="inputbox" style="margin-top: 8rpx;">
				<uni-easyinput type="password" v-model="form.newpassword" :placeholderStyle="placeholderStyle"
					placeholder="请输入新密码"></uni-easyinput>
			</view>
			<view class="fz32 color303b39 flex-row align-center fwbold" style="margin-top: 82rpx;color: #7E8987;">
				确认新密码
			</view>
			<view class="inputbox" style="margin-top: 8rpx;">
				<uni-easyinput type="password" v-model="form.truenewpassword" :placeholderStyle="placeholderStyle"
					placeholder="请输入确认新密码"></uni-easyinput>
			</view>

			<view class="rule" style="margin-top: 60rpx;">
				<p>密码设置规则:</p>
				<p :style="{color:regex1==1?'#576260':regex1=='yes'?'green':'red'}">1.长度为8-20个字符</p>
				<p :style="{color:regex2==1?'#576260':regex2=='yes'?'green':'red'}">2.必须包含大小写字母和数字</p>
				<p :style="{color:regex4==1?'#576260':regex4=='yes'?'green':'red'}">3.可以使用特殊字符!@#$%^&*</p>
				<p :style="{color:regex3==1?'#576260':regex3=='yes'?'green':'red'}">4.不能包含空格</p>
			</view>
			<view class="align-center loginbtn justify-between">
				<button :disabled="form.oldpassword.length>0?false:true" :style="{opacity:form.oldpassword.length>0?'1':'0.5'}" class="button fwbold" type="primary" @click="submit">确认修改</button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		sendSmsCode,
		checkSmsCode,
		
	} from '@/api/login.js'
	
	import {
		updatePwd
	} from '@/api/api.js'
	export default {
		onLoad() {
			let systemInfo = uni.getSystemInfoSync();
			this.maxHeight = systemInfo.windowHeight + "px";
		},
		data() {
			return {
				maxHeight: '',
				agree: false,
				form: {
					oldpassword: '',
					newpassword: '',
					truenewpassword: '',
				},
				regex1:1,
				regex2:1,
				regex3:1,
				regex4:1,

				isCountingDown: false, // 是否正在倒计时
				countDown: 60, // 倒计时秒数
				countDownTimer: null, //计时器
				codeid: null,
				operateId: 1,

				placeholderStyle: "color:#7E8987;font-size:32rpx",

			}
		},
		methods: {
			passwordregex(){
				const regex1 = /^.{8,20}$/;
				const regex2 = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,20}$/;
				const regex3 = /^(?!.*\s)/;
				this.regex1 = regex1.test(this.form.newpassword)?'yes':'no'
				this.regex2 = regex2.test(this.form.newpassword)?'yes':'no'
				this.regex3 = regex3.test(this.form.newpassword)?'yes':'no'
				this.regex4 = 'yes'
				
				console.log(regex3.test(this.form.newpassword))
			},
			submit() {
				// 需要先判断旧密码是否正确
				this.passwordregex()
				if (this.form.newpassword == this.form.truenewpassword) {
					const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?!.*\s).{8,20}$/;
					if(regex.test(this.form.newpassword)==false){
						this.$refs.uToast.show({
							title: '密码格式有误',
							type: 'error',
						})
						return
					}
					
					let datastr = "?oldPassword="+this.form.oldpassword+"&newPassword="+this.form.newpassword
					updatePwd(datastr).then(res=>{
						this.$refs.uToast.show({
							title: '密码重置成功',
							type: 'success',
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 2000)
					})
				} else {
					this.$refs.uToast.show({
						title: '输入两次密码不一致',
					})
				}
			},
			backpage() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	::v-deep .is-input-border {
		border: none;
	}

	::v-deep .uni-easyinput__content {
		background: transparent !important;
	}

	::v-deep .uni-input-input {
		font-size: 32rpx;
	}

	::v-deep uni-checkbox .uni-checkbox-input {
		background: transparent;
	}

	::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		color: #fff;
		border-color: #00D9B2;
		background: #00D9B2;
	}

	::v-deep .uni-icons {
		font-size: 52rpx;
	}

	.pagebody {
		box-sizing: border-box;

		.topbgbox {

			box-sizing: border-box;
			padding: 14rpx 40rpx 0;
			background-image: url('/static/images/login/otherbg.png');
			position: relative;
			background-repeat: no-repeat;
			background-size: cover;

			.inputbox {
				border-bottom: 1px solid #B8C3C1;
				padding-bottom: 0.1rem;
			}

			.rule {
				p {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					// color: #576260;
					line-height: 56rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}

			.loginbtn {
				// position: absolute;
				// bottom: 0;
				margin-top: 96rpx;

				uni-button {
					background-color: #00D9B2;
					border-radius: 98rpx;
					width: 668rpx;
				}

				uni-button:after {
					border: none;
				}

				.button {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 36rpx;

				}
			}
		}

	}
</style> -->


<!-- 改版 不需要原始密码 -->
<template>
	<view class="pagebody" :style="{ minheight: maxHeight }">
		<view class="topbgbox">
			<view class="justify-between align-center">
				<image @click="backpage" src="@/static/images/login/leftjt.png" alt=""
					style="width: 48rpx;height: 48rpx;"></image>
				<view class="color303b39 fz40 fwbold">
					修改密码
				</view>
				<view class="">
				</view>
			</view>
			<view class="fz32 color303b39 flex-row align-center fwbold" style="margin-top: 82rpx;color: #7E8987;">
				新密码
			</view>
			<view class="inputbox" style="margin-top: 8rpx;">
				<uni-easyinput type="password" v-model="form.newpassword" :placeholderStyle="placeholderStyle"
					placeholder="请输入新密码"></uni-easyinput>
			</view>
			<view class="fz32 color303b39 flex-row align-center fwbold" style="margin-top: 82rpx;color: #7E8987;">
				确认新密码
			</view>
			<view class="inputbox" style="margin-top: 8rpx;">
				<uni-easyinput type="password" v-model="form.truenewpassword" :placeholderStyle="placeholderStyle"
					placeholder="请输入确认新密码"></uni-easyinput>
			</view>
			<view class="fz32 color303b39 flex-row align-center fwbold" style="margin-top: 82rpx;color: #7E8987;">
				手机号
			</view>
			<view class="inputbox" style="margin-top: 8rpx;">
				<uni-easyinput v-model="form.phone" :placeholderStyle="placeholderStyle"
					placeholder="请输入手机号"></uni-easyinput>
			</view>
			<view class="fz32 color303b39 flex-row align-center fwbold" style="margin-top: 82rpx;color: #7E8987;">
				验证码
			</view>
			<view class="inputbox pos-rel" style="margin-top: 8rpx;">
				<view v-if="isCountingDown" class="pos-abs" style="right: 0; top: 20rpx;">
					{{countDown}}秒后重发
				</view>
				<view v-else class="pos-abs" style="z-index: 99;;color: #00D9B2;right: 0; top: 20rpx;"  @click="getSmsCode">
					获取验证码
				</view>
				<uni-easyinput type="number" :clearable="false" v-model="form.code" :placeholderStyle="placeholderStyle"
					placeholder="请输入验证码"></uni-easyinput>
			</view>

			<view class="rule" style="margin-top: 60rpx;">
				<p>密码设置规则:</p>
				<p :style="{color:regex1==1?'#576260':regex1=='yes'?'green':'red'}">1.长度为8-20个字符</p>
<!-- 				<p :style="{color:regex4==1?'#576260':regex4=='yes'?'green':'red'}">2.可以使用特殊字符!@#$%^&*</p>
				<p :style="{color:regex3==1?'#576260':regex3=='yes'?'green':'red'}">3.不能包含空格</p> -->
			</view>
			<view class="align-center loginbtn justify-between">
				<button :disabled="(form.newpassword.length > 0 && form.truenewpassword.length > 0 && form.phone.length > 0 && form.code.length > 0) ? false : true" :style="{opacity:form.newpassword.length>0?'1':'0.5'}" class="button fwbold" type="primary" @click="submit">确认修改</button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		sendSmsCode,
		checkSmsCode,
		
	} from '@/api/login.js'
	
	import {
		retrievePwd
	} from '@/api/api.js'
	export default {
		onLoad() {
			let systemInfo = uni.getSystemInfoSync();
			this.maxHeight = systemInfo.windowHeight + "px";
		},
		data() {
			return {
				maxHeight: '',
				agree: false,
				form: {
					oldpassword: '',
					newpassword: '',
					truenewpassword: '',
					phone:'',
					code:''
				},
				regex1:1,
				regex2:1,
				regex3:1,
				regex4:1,

				isCountingDown: false, // 是否正在倒计时
				countDown: 60, // 倒计时秒数
				countDownTimer: null, //计时器
				codeid: null,
				operateId: 1,

				placeholderStyle: "color:#7E8987;font-size:32rpx",

			}
		},
		methods: {
			passwordregex(){
				const regex1 = /^.{8,20}$/;
				const regex3 = /^(?!.*\s)/;
				this.regex1 = regex1.test(this.form.newpassword)?'yes':'no'
				this.regex3 = regex3.test(this.form.newpassword)?'yes':'no'
				this.regex4 = 'yes'
				
			},
			getSmsCode() {
				// 发送请求后提示"正在获取验证码"打开倒计时
				if (this.form.phone) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					let data = {
						phone:this.form.phone,
						operateId:this.operateId
					}
					sendSmsCode(data).then(res=>{
						this.form.id = res.data
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 开启计时器
						this.startCountDown();
					})
				}
			},
			// 开启倒计时
			startCountDown() {
				this.isCountingDown = true;
				this.countDown = 60;
				this.countDownTimer = setInterval(() => {
					this.countDown--;
					if (this.countDown <= 0) {
						this.resetCountDown();
					}
				}, 1000);
			},
			// 重置倒计时
			resetCountDown() {
				clearInterval(this.countDownTimer);
				this.isCountingDown = false;
				this.countDown = 60;
			},
			submit() {
				this.passwordregex()
				if (this.form.newpassword == this.form.truenewpassword) {
					const regex = /^(?=.*\d)(?!.*\s).{8,20}$/;
					if(regex.test(this.form.newpassword)==false){
						this.$refs.uToast.show({
							title: '密码格式有误',
							type: 'error',
						})
						return
					}
					
					// let datastr ="?newPassword="+this.form.newpassword
					
					let data = {
						"phonenumber":this.form.phone,
						"password":this.form.newpassword,
						"smsVerificationDTO":{
							"id":this.form.id,
							"phone":this.form.phone,
							"code":this.form.code
						}
					}
					
					retrievePwd(data).then(res=>{
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
						})
						
						if("操作成功" === res.msg){
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 2000)
						}
					})
				} else {
					this.$refs.uToast.show({
						title: '输入两次密码不一致',
					})
				}
			},
			backpage() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	::v-deep .is-input-border {
		border: none;
	}

	::v-deep .uni-easyinput__content {
		background: transparent !important;
	}

	::v-deep .uni-input-input {
		font-size: 32rpx;
	}

	::v-deep uni-checkbox .uni-checkbox-input {
		background: transparent;
	}

	::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		color: #fff;
		border-color: #00D9B2;
		background: #00D9B2;
	}

	::v-deep .uni-icons {
		font-size: 52rpx;
	}

	.pagebody {
		box-sizing: border-box;

		.topbgbox {

			box-sizing: border-box;
			padding: 14rpx 40rpx 0;
			background-image: url('/static/images/login/otherbg.png');
			position: relative;
			background-repeat: no-repeat;
			background-size: cover;

			.inputbox {
				border-bottom: 1px solid #B8C3C1;
				padding-bottom: 10rpx;
			}

			.rule {
				p {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					// color: #576260;
					line-height: 56rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}

			.loginbtn {
				// position: absolute;
				// bottom: 0;
				margin-top: 96rpx;

				uni-button {
					background-color: #00D9B2;
					border-radius: 98rpx;
					width: 668rpx;
				}

				uni-button:after {
					border: none;
				}

				.button {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 36rpx;

				}
			}
		}

	}
</style>